<template>
<div id="pixi_container"></div>
</template>

<script setup >
import * as PIXI from "pixi.js";
// import { onMounted } from "vue";
import imageURL from "./assets/T_999.png";
import logo from "./assets/logo.png";
console.log(imageURL,logo)
const app = new PIXI.Application({
  width:500,
  height:500,
  powerPreference:"high-performance",
  transparent: true, // 使画布透明
  antialias: false, // 开启抗锯齿
});
document.body.appendChild(app.view);


const geometry = new PIXI.Geometry()
    .addAttribute(
        "aVertexPosition", // the attribute name
        [
          -250,
          -250, // x, y
          250,
          -250, // x, y
          250,
          250,
          -250,
          250,
        ], // x, y
        2
    ) // the size of the attribute
    .addAttribute(
        "aUvs", // uv
        [
          0,
          0, // u, v
          1,
          0, // u, v
          1,
          1,
          0,
          1,
        ], // u, v
        2
    ) // 设置下标从什么地方开始
    .addIndex([0, 1, 2, 0, 2, 3]);

// ! 顶点着色器
const vertexSrc = /*glsl*/`
    precision mediump float;

attribute vec2 aVertexPosition;
attribute vec2 aUvs;

uniform mat3 translationMatrix;
uniform mat3 projectionMatrix;

varying vec2 vUvs;

void main() {

  vUvs = aUvs;
  gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

}`

// ! 片元着色器
const fragmentSrc = /*glsl*/`

precision mediump float;

varying vec2 vUvs;

uniform sampler2D uSampler2;
uniform float time;

void main() {

  gl_FragColor = texture2D(uSampler2,vUvs);

}
`
const uniforms = {
  uSampler2: PIXI.Texture.from(imageURL),
  time: 0,
};

setTimeout(()=>{
  uniforms.uSampler2 = PIXI.Texture.from(logo);
},1000)
// 设置shader，顶点着色器，片元着色器 uniforms
const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms);

const quad = new PIXI.Mesh(geometry, shader);

quad.position.set(250, 250);
app.stage.addChild(quad);

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
